<template>
  <div class="module-one">
    <!-- 头部的盒子 -->
    <header>
      <h1>数据可视化-Echarts</h1>
      <div class="showTime">{{ showTime }}</div>
    </header>
    <!-- 页面主题部分 -->
    <div class="mainbox">
      <div class="column">
        <div class="panel bar">
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <employment-industry-one />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>折线图-就业行业</h2>
          <div class="chart">
            <employment-industry-three />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>饼形图-年龄分布</h2>
          <div class="chart">
            <employment-industry-five />
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column">
        <!-- no数字模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>11212</li>
              <li>21212</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>前端需求人数</li>
              <li>市场供应人数</li>
            </ul>
          </div>
        </div>
        <!-- map盒子 -->
        <div class="map">
          <!-- <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div> -->
          <!-- <div class="chart"> -->
          <map-custom></map-custom>
          <!-- </div> -->
        </div>
      </div>
      <div class="column">
        <div class="panel bar2">
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <employment-industry-two />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
          <h2>折线图-就业行业</h2>
          <div class="chart">
            <employment-industry-four />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <employment-industry-six />
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import flexible from '@/utils/flexible.js'
import EmploymentIndustryOne from './components/employment-industry-one.vue'
import EmploymentIndustryTwo from './components/employment-industry-two.vue'
import EmploymentIndustryThree from './components/employment-industry-three.vue'
import EmploymentIndustryFour from './components/employment-industry-four.vue'
import EmploymentIndustryFive from './components/employment-industry-five.vue'
import EmploymentIndustrySix from './components/employment-industry-six.vue'
import MapCustom from './components/map-custom.vue'
export default {
  components: {
    EmploymentIndustryOne,
    EmploymentIndustryTwo,
    EmploymentIndustryThree,
    EmploymentIndustryFour,
    EmploymentIndustryFive,
    EmploymentIndustrySix,
    MapCustom
  },
  data() {
    return {
      showTime: '',
      timer: null
    }
  },
  mounted() {
    flexible(window, document)
    this.timer = setInterval(this.getTime, 1000)
  },
  methods: {
    getTime() {
      let dt = new Date(),
       y = dt.getFullYear(),
       mt = dt.getMonth() + 1,
       day = dt.getDate(),
       time = dt.toTimeString().slice(0, 8)
      this.showTime = `当前时间：${y}年${mt}月${day}日 ${time}`
    }
  },
  destroyed() {
    document.querySelector('html').style.fontSize = '16px'
  }
}
</script>
<style lang="scss" scoped>
.module-one {
  width: 1920px;
  height: 1080px;
  background: -webkit-radial-gradient(#3612f4, #07075e, #04043b);
  background: -o-radial-gradient(#3612f4, #07075e, #04043b);
  background: -moz-radial-gradient(#3612f4, #07075e, #04043b);
  background: radial-gradient(#3612f4, #07075e, #04043b);
  background-repeat: no-repeat;
  background-position: top center;
}
header {
  position: relative;
  height: 76px;
  line-height: 76px;
  background-size: 100% 100%;
  h1 {
    font-size: 33px;
    font-weight: 600;
    color: #fff;
    text-align: center;
  }
  .showTime {
    position: absolute;
    top: 0px;
    right: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
  }
}
// 页面主题盒子
.mainbox {
  display: flex;
  height: calc(100% - 76px);
  margin: 0 auto;
  padding: 10px 10px;
  .column {
    flex: 3;
    &:nth-child(2) {
      flex: 5;
      margin: 0 10px;
    }
  }
}
// panel
.panel {
  position: relative;
  height: 315px;
  padding: 0 10px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.03);
  // background-color: pink;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
  }
  .panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &::before {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
      content: "";
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
      content: "";
    }
  }
  h2 {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    a {
      color: #fff;
      text-decoration: none;
      margin: 0 20px;
    }
  }
  .chart {
    height: calc(100% - 40px);
    // background-color: pink;
  }
}
// no数字模块
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 10px;
  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 30px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
    ul {
      display: flex;
      li {
        position: relative;
        flex: 1;
        list-style: none;
        font-size: 60px;
        color: #ffeb7b;
        text-align: center;
        font-family: "DS-Digital";
        &::after {
          position: absolute;
          top: 25%;
          right: 0px;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          content: "";
        }
      }
    }
  }
  .no-bd {
    ul {
      display: flex;
      li {
        flex: 1;
        list-style: none;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 22px;
        padding-top: 10px;
      }
    }
  }
}
// map盒子
.map {
  position: relative;
  height: calc(100% - 118px);
  // overflow: hidden;
  .map1 {
    width: 6.475rem;
    height: 6.475rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #234, $alpha: 0.4);
  }
  .map2 {
    width: 8.0375rem;
    height: 8.0375rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #fad3fa, $alpha: 0.3);
    animation: rotate1 15s linear infinite;
  }
  .map3 {
    width: 7.075rem;
    height: 7.075rem;
    border-radius: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #000000, $alpha: 0.1);
    animation: rotate2 10s linear infinite;
  }
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    // background: pink;
    width: 100%;
    height: 10.125rem;
  }
  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate2 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}
</style>
